<template>
    <div>
        <!--  点击按钮，字体颜色改变  -->
        <p :class="{active:isActive}">这是一段文字</p>
        <button @click="changeActive">点击切换字体颜色</button>
    </div>
</template>

<script>
    export default {
        name: "Hello.vue",
        data:function () {
            return{
                isActive: false
            }
        },
        methods:{
            changeActive:function () {
                this.isActive=!this.isActive;
            }
        }
    }
</script>

<style scoped>
    .active{
        color: green;
    }
</style>
